<layout name="no-slide"/>

<style type="text/css">
  body {
	  min-height: 100%;
		background-image: -webkit-radial-gradient(center, circle, #ccc, #999);
		background-image: -ms-radial-gradient(center, circle, #ccc, #999);
		background-image: -moz-radial-gradient(center, circle, #ccc, #999);
		background-image: radial-gradient(circle at center, #ccc, #999);
  }
  .vote-result-small {
    color: #F1F1F1;
 }
  .vote-search {
    display: none;
    padding: 7em 1em 1em;
  }
  .vote-title {
    text-align: center;
    margin-bottom: 1em;
  }
  .vote-result {
    display: none;
    padding: 1em;
  }
  .copyright {
	  color: #E8E8E8;
  }
  .vote-result-title {
    margin-bottom: 1em;
    border-bottom: 1px solid #555;
  }
  .vote-result-content p {
    line-height: 1;
    margin-bottom: 1em;
  }
  .vote-result-small {
    color: #F6F6F6;
  }
 .box {
    width: 75%;
    margin: 0 auto;
    padding: 2em 0 2em 0;
 } 
 .box .box-tit {
    color: #C14268;
    font-size: 1.8em;
    font-weight: bold;
 }
 .box p {
    color: #798998;
    font-size: 3.5em;
 }
.w100 {
		display: block;
		width: 100%;
}
.form .form-item {
	   padding: 0;
	   margin: 0;
}
.btn-dui {
	   width: 100%;
	   margin-top: .714em;
	   font-size: 1.2em;
}
#form {
	    width: 100%;
			padding-bottom: 4em;
}
.vote-search {
	   width: 80%;
	   margin: 0 auto;
	   padding: 0;
}
.col-md-12 input {
	  font-size: 1.2em;
    padding: 1.5rem !important;
}
</style>
<div class="box">
  <p class="box-tit">荣威</p>
  <p>加油好的士</p>
</div>
<header class="driver-vote-header">
  <img class="w100" src="__STYLE__/Site/images/driver/driver-cart2.png" alt="加油好的士">
</header>

<div id="vote-search" class="vote-search">
    <!--<h3>查询不到您的报名信息~</h3>-->
  <h3 class="vote-title">输入服务号码查询</h3>
  <form id="form" class="form" action="__CONTROLLER__/getVote" method="post">
    <div class="form-item fun-grid">
      <p class="col-md-12">
        <input type="text" name="service_no" value="{$driver.service_no}">
      </p>
    </div>
    <div class="form-item fun-grid">
      <p class="col-md-12">
        <button class="btn btn-blue btn-dui" type="submit">查询</button>
      </p>
    </div>
  </form>
</div>

<section id="vote-result" class="vote-result">
  <h4 class="vote-result-title">为您查询到的结果</h4>
  <article id="vote-result-content" class="vote-result-content"></article>
</section>

<div class="tc">
  <button id="vote-search-other" class="vote-search-other btn btn-blue">查询其他</button>  
</div>

<template id="vote-result-tpl">
  <p>服务号：{{service_no}}</p>
  <p>姓名：{{name}}</p>
  <p>电话：{{tel}}</p>
  <p>得票数：{{vote}}<!--&nbsp;&nbsp;<small class="vote-result-small">(截止时间:{$driverTerm.driverSnap.end_time|date="Y-m-d H:i:s", ###})</small>--></p>
  <p>得票排行：{{rank}}</p>
  <p>报名时间：{{create_time}}</p>
</template>

<script type="text/javascript">
  

  (function(){

    // 加载modal.js
    GH.load( "js", "js-modal", "__COMMON__/js/modal.js" );

    Date.prototype.Format = function (fmt) { //author: meizz 
      var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
      };
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
      if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
    };

    var data = {:json_encode($driver)};
    var voteSearch = GH.$( "#vote-search" ),
        voteSearchOther = GH.$( "#vote-search-other" ),
        voteResult = document.getElementById( "vote-result" ),
        voteResultContent = document.getElementById( "vote-result-content" ),
        form = GH.$( "#form" );

    // 初始状态如果未查询到此用户的报名信息
    if ( !data ) {
      voteSearch.style.display = "block";
      voteSearchOther.style.display = "none";
    } else {
      showVoteResult( data );
      voteSearchOther.addEventListener("click", function(){
        this.style.display = "none";
        voteResult.style.display = "none";
        voteSearch.style.display = "block";
      }, false);
    };

    form.addEventListener( "submit", checkPost, false );

    function checkPost (e) {
      e.preventDefault();
      if ( !GH.$( "#form input" ).value.trim() ) {
        GH.showMessage( "请输入要查询的服务号" );
        return false;
      };
      postVote.call(this);
    };

    function postVote() {
      var fd = GH.serialize( form );
      fd.sid = {$sid};
      fd.term_id = {$termId};
      GH.ajax(this.action, fd, function( data ){
        data = data.extra.driver;
        if ( data ) {
          showVoteResult( data );
        } else {
          noVoteResult();
          voteResultContent.innerHTML = "";
        }
      });
    };

    // 显示结果
    function showVoteResult( data ) {
      data.create_time = new Date(data.create_time*1000).Format("yyyy-MM-dd hh:mm:ss");
      var tpl = document.getElementById( "vote-result-tpl" ).innerHTML;
      var html = tpl.replace(/{{([^}}]+)?}}/g, function( s0, s1 ) {
                   return data[s1];
                 });
      voteResultContent.innerHTML = html;
      voteResult.style.display = "block";
    };

    // 查询不到结果
    function noVoteResult() {
      modal.confirm({
        title: "查询结果",
        text: "未查询到相关数据，请确认您是否已经报名？",
        buttons: [{
          text: "留在本页",
          close: true
        }, {
          text: "去报名",
          click: function() {
            window.location.href = "__CONTROLLER__/joinForm?sid=" + {$sid} + "&term_id=" + {$termId};
          }
        }]
      })
    };
    
	  
	
  })();
</script>